import React, { useState, useEffect } from 'react'
import { history } from 'umi'
import { BsHouseDoorFill, BsHouseDoor, BsBagFill, BsBag, BsPersonFill, BsPerson } from 'react-icons/bs'
import { TabBar } from 'antd-mobile';

import './index.less'

interface Props {
    show: boolean,
    pathName: undefined | string
}

interface Items {
    title: string,
    selectedIcon: React.ReactElement,
    icon: React.ReactElement,
    link: string
}


const menubar: React.FC<Props> = (props) => {
    const [items, setItems] = useState<Items[]>([
        {
            title: '首页',
            selectedIcon: <BsHouseDoorFill style={{ fontSize: '1.5rem' }} />,
            icon: <BsHouseDoor style={{ fontSize: '1.5rem' }} />,
            link: '/'
        },
        {
            title: '订单',
            selectedIcon: <BsBagFill style={{ fontSize: '1.5rem' }} />,
            icon: <BsBag style={{ fontSize: '1.5rem' }} />,
            link: '/order'
        },
        {
            title: '我的',
            selectedIcon: <BsPersonFill style={{ fontSize: '1.5rem' }} />,
            icon: <BsPerson style={{ fontSize: '1.5rem' }} />,
            link: '/user'
        },
    ])
    return (
        <div className="menu-bar">
            { props.show &&
                <TabBar>
                    {
                        items.map((v, i) => {
                            return <TabBar.Item
                                key={v.link}
                                title={v.title}
                                icon={v.icon}
                                selectedIcon={v.selectedIcon}
                                selected={props.pathName === v.link}
                                onPress={() => history.push(v.link)}
                            />
                        })
                    }
                </TabBar>
            }
        </div>
    )
}

export default menubar